<template>
	<view class="tn-margin-top-xs tn-margin-bottom-lg">
    <tn-scroll-view  @scrolltolower="onPulling">
      <block v-for="(item,index) in list" :key="index">
        <tn-swipe-action>
          <tn-swipe-action-item :options="options" @click="clickItem($event, item)">
            <view class="list__item list__demand" @click="goto('/pages/demand/view', item.demand.id)">
              <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom-sm">
                <view class="justify-content-item">
                  <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                    <view>
                      <view class="tn-padding-right tn-text-bold tn-text-md">{{ item.demand.title || '' }}</view>
                      <view class="tn-padding-top-sm tn-text-ellipsis-3">{{ item.demand.description || '' }}</view>
                    </view>
                  </view>
                </view>
              </view>
              
              <block v-if="item.demand.picture">
                <view class="tn-padding-top-xs">
                  <image class="list__image--1 tn-margin-bottom-sm" :src="item.demand.picture" lazy-load :lazy-load-margin="1" mode="aspectFill"></image>
                </view>
              </block>
              
              <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-sm">
                <view v-if="item.demand.category" class="justify-content-item tn-text-center">
                  <view class="list__label__item tn-float-left">
                    <text class="list__label__item--prefix">#</text> {{ item.demand.category.title || '' }}
                  </view>
                </view>
                <view class="justify-content-item tn-flex tn-flex-col-center">
                  <view class="tn-color-gray tn-text-sm">
                    <text class="tn-icon-share-square tn-padding-right-xs"></text>
                    <text class="tn-padding-right">{{ item.demand.share_total }}</text>
                    <text class="tn-icon-star tn-padding-right-xs"></text>
                    <text class="tn-padding-right">{{ item.demand.collection_total }}</text>
                    <text class="tn-icon-praise tn-padding-right-xs"></text>
                    <text class="">{{ item.demand.approval_total }}</text>
                  </view>
                </view>
              </view>
            </view>
          </tn-swipe-action-item>
        </tn-swipe-action>
      </block>
    </tn-scroll-view>
	</view>
</template>

<script>
	import base from '@/common/mixin/base.js'
	import request from '@/common/request.js';

	export default {
		name: 'CxUserDemandList',
		mixins: [base],
		props: {
			model: {
			  type: String
			},
		},
		data() {
			return {
        query: {
          page: 1,
          limit: 4,
        },
        list: [],
        options: [{
            icon: 'delete',
            style: {
              backgroundColor: '#E83A30',
              width: '80rpx',
              height: '80rpx',
              margin: '0 12rpx',
              borderRadius: '100rpx'
            }
          }
        ],
			}
		},
    methods: {
      clickItem: function(e, item) {
        if (e.type === 'button') {
          this.handleRemove(this.model, item);
        } else if (e.type === 'item') {
          this.goto('/pages/demand/view', item.demand.id);
        }
      },
      onPulling(e) {
        this.getUserListData(this.model);
      }
    },
    created() {
      this.getUserListData(this.model);
    },
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/common.scss';
</style>